{include file="account/common/head"}
<style>
    .search {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<script>
    document.title = "我的消息 | {:config('system.base.title')} "
</script>
<div class="layout clearfix">

    <span class="layui-breadcrumb">
        <a href="{:url('/index/index/index')}">首页</a>
        <a><cite>我的消息</cite></a>

    </span>
    <div class="navbar">
        <div style="padding: 16px;">
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
        <script type="text/html" id="toolbarDemo">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="readAll">一键已读</button>
                <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="delCheck">删除选中</button>
                <br>
                <span>未读消息：<span class="layui-badge layui-bg-orange">{$base.msgCount}</span></span>
              </div>
            </script>
        <script type="text/html" id="toolDemo">
              <div class="layui-clear-space">
                <a class="layui-btn layui-btn-xs layui-bg-purple" lay-event="detail">查看消息/文章</a>
                <!-- <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="readed">阅读</a> -->
                <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</a>
            </div>
            </script>
    </div>
</div>
{include file="common/bottom"}
<script>
    layui.use(function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var $ = layui.$;
        // 创建渲染实例
        table.render({
            elem: '#test',
            url: '/index/msg/list',
            height: 'full',
            toolbar: '#toolbarDemo',
            totalRow: true, // 开启合计行
            page: true,
            parseData: function (res) { // res 即为原始返回的数据
                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.message, // 解析提示文本
                    "count": res.data.count, // 解析数据长度
                    "data": res.data.list.data
                };
            },
            cols: [[
                { type: 'checkbox' },
                {
                    field: 'type', title: '消息类型', width: 100, templet: function (d) {
                        if (d.type == 0) {
                            return `<span class="layui-badge-rim">系统消息</span>`
                        } else if (d.type == 1) {
                            return `<span class="layui-badge-rim">普通消息</span>`
                        }
                    }
                },
                { field: 'content', title: '内容', width: 300 },
                {
                    field: 'send_uid', title: '发送者', width: 100, templet: function (d) {
                        if (d.type == 0) {
                            return `<a class="layui-font-14 layui-font-balck" href='#'>系统消息</a>`
                        } else {
                            return `<a class="layui-font-14 layui-font-blue" href='/index/profile/index.html?uid=${d.userData.id}'>${d.userData.username}</a>`
                        }
                    }
                },
                {
                    field: 'status', title: '状态', width: 100, templet: function (d) {
                        if (d.status == 1) {
                            return `<span class="layui-badge layui-bg-green">已阅读</span>`
                        } else {
                            return '<span class="layui-badge layui-bg-orange">未查看</span>'
                        }
                    }
                },
                { field: 'create_time', title: '发送时间', width: 200 },
                { title: '操作', width: 200, minWidth: 125, templet: '#toolDemo' }
            ]],
            done: function () {
                var id = this.id;
                // 下拉按钮测试
                dropdown.render({
                    elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                    data: [{
                        id: 'update',
                        title: '编辑'
                    }, {
                        id: 'delete',
                        title: '删除'
                    }],
                    // 菜单被点击的事件
                    click: function (obj) {
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch (obj.id) {
                            case 'update':
                                if (data.length !== 1) return layer.msg('请选择一行');
                                layer.open({
                                    title: '编辑',
                                    type: 2,
                                    area: ['80%', '80%'],
                                    content: '/index/article/update/id/' + data.id
                                });
                            case 'delete':
                                if (data.length === 0) {
                                    return layer.msg('请选择一行');
                                }
                                layer.msg('delete event');
                                break;
                        }
                    }

                });

                table.on('tool(test)', function (obj) { // 双击 toolDouble
                    var data = obj.data;
                    if (obj.event === 'readed') {
                        $.get('/index/msg/read/id/' + data.id, (e) => {
                            if (e.code == 200) {
                                table.reload('test', {
                                    a: 1
                                })
                            } else {
                                layer.msg('无需重复阅读', { shade: 0.2, time: 1000 })
                            }
                        })
                    } else if (obj.event === 'detail') {
                        if (data.article_id) {
                            layer.open({
                                title: data.content,
                                type: 2,
                                area: ['80%', '80%'],
                                content: '/index/article/index.html?art_id=' + data.article_id
                            });
                        } else {
                            layer.alert(data.content)
                        }
                        if (data.status == 0) {
                            $.get('/index/msg/read/id/' + data.id, (e) => {
                                if (e.code == 200) {
                                    table.reload('test', {
                                        a: 1
                                    })
                                }
                            })
                        }

                    } else if (obj.event == 'del') {
                    layer.confirm('确定要删除这条消息吗？<br>删除后不可恢复哦！',() => {
                        $.get('/index/msg/del/id/' + data.id, (e) => {
                            if (e.code == 200) {
                                layer.msg('删除成功')
                                table.reload('test', {
                                    a: 1
                                })
                            } else {
                                layer.msg(e.message, { shade: 0.2, time: 1000 })
                            }
                        })
                    })
                    }
                });

            },
            error: function (res, msg) {
                console.log(res, msg)
            }
        });
        // 工具栏事件

        table.on('toolbar(test)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'readAll':
                    layer.confirm('确定要读取所有的消息吗？', () => {
                        $.get('/index/msg/readAll/', (e) => {
                            if (e.code == 200) {
                                table.reload('test')
                            }
                            layer.msg('操作成功', { icon: 6 })
                        })
                    })
                    break;
                case 'delCheck':
                    var data = checkStatus.data;
                    var delId = ''
                    data.forEach((el) => {
                        delId += el.id + ','
                    })
                    layer.confirm('确定要删除选中的消息吗？<br>删除后不可恢复哦！', {
                        btn: ['确定', '取消'],
                    }, function () {
                        layer.msg('操作成功', { icon: 6 })
                        table.reload('test')
                        $.post('/index/msg/del', { id: delId }, (res) => {
                            layer.msg('操作成功', { icon: 6 })
                            table.reload('test')
                        })

                    })
                    break;


            };

        });
        // 触发表格复选框选择
        table.on('checkbox(test)', function (obj) {
            console.log(obj)
        });

        // 触发表格单选框选择
        table.on('radio(test)', function (obj) {
            console.log(obj)
        });

        // 行单击事件
        table.on('row(test)', function (obj) {
            //console.log(obj);
            //layer.closeAll('tips');
        });
        // 行双击事件
        table.on('rowDouble(test)', function (obj) {
            console.log(obj);
        });
        $('#search').click(() => {
            var title = $('#title').val()
            table.reload('test', {
                where: {
                    title: title
                },
            }, true);
        })
    });
</script>